<template>
	<view>
		<video 
			id="myVideo1"
			:style="{'width': '750rpx', 'height':'375rpx', 'display': 'block','margin-top':'0rpx','position':'relative'}" 
			:controls="true"
		>
		</video>
	</view>
</template>

<script setup>
	import { onMounted } from 'vue';
	import BakiDef from '@/h5sdk/BakiDef.js';
	import H5Client from '@/h5sdk/BakiClient.js'
	var session;
	const onConnect = (ctx, res)=>{
		 console.log("onConnect", res, BakiDef.BAKI_MSG_STATUS_STR[res]);
			session.login("123456");
	}
	const onDisconnect=(ctx)=>{
			console.log("onDisconnect", ctx);
	}
	const onLogin = (ctx, login_res)=>{
			console.log("onLogin", login_res);
			session.openStream();
	}
	
	const onOpenStream = (ctx, openStream_res)=>{
			console.log("onOpenStream", openStream_res);
	}

	const onCloseStream = (ctx, closeStream_res)=>{
			console.log("onCloseStream", closeStream_res);
	}

	const onStream = (ctx, devId, media_data, frameType, pts)=>{
			console.log(devId, frameType, pts, media_data.length);
	}

	
	
	const play = ()=>{
			session = new H5Client(onConnect, onDisconnect, onLogin, onOpenStream, onCloseStream, onStream, this);
			// var devId = document.getElementById("devId").value;
			console.log(session)
			session.connect('146379285');
	}
	
	onMounted(()=>{
		play()
	})
</script>

<style>
	.right{
		width: 100rpx;
		height: 500px;
		background-color: rgba(0, 0, 0, 0.4);
		position: absolute;
		right: 100rpx;
	}
	.right div{
		color: #fff;
	}

</style>